<template>
  <view class="container">
    <!-- 顶部信息卡片 -->
    <view class="info-card" v-if="currentElderly">
      <view class="user-info">
        <image class="avatar" :src="currentElderly.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
        <view class="info-content">
          <text class="name">{{currentElderly.name}}</text>
          <text class="age">{{currentElderly.age}}岁</text>
          <text class="gender">{{currentElderly.sex === 'male' ? '男' : '女'}}</text>
        </view>
      </view>
      <view class="health-overview">
        <view class="health-item">
          <text class="label">血压</text>
          <text class="value" :class="getBloodPressureClass(currentElderly.bloodPressure)">
            {{currentElderly.bloodPressure || '--'}}
          </text>
        </view>
        <view class="health-item">
          <text class="label">心率</text>
          <text class="value" :class="getHeartRateClass(currentElderly.heartRate)">
            {{currentElderly.heartRate || '--'}}
          </text>
        </view>
        <view class="health-item">
          <text class="label">血氧</text>
          <text class="value" :class="getBloodOxygenClass(currentElderly.bloodOxygen)">
            {{currentElderly.bloodOxygen || '--'}}
          </text>
        </view>
      </view>
    </view>

    <!-- 健康管理菜单 -->
    <view class="menu-section">
      <view class="menu-title">健康管理</view>
      <view class="menu-grid">
        <view class="menu-item" @click="navigateTo('/pages/common/health/bloodPressure')">
          <image class="menu-icon" src="/static/icons/blood-pressure.png"></image>
          <text class="menu-text">血压记录</text>
          <text class="menu-desc">查看历史记录</text>
        </view>
        <view class="menu-item" @click="navigateTo('/pages/common/health/bloodOxygenMonitor')">
          <image class="menu-icon" src="/static/icons/blood-oxygen.png"></image>
          <text class="menu-text">血氧监测</text>
          <text class="menu-desc">实时监测</text>
        </view>
        <view class="menu-item" @click="navigateTo('/pages/common/health/viewHeartRate')">
          <image class="menu-icon" src="/static/icons/heart-rate.png"></image>
          <text class="menu-text">心率监测</text>
          <text class="menu-desc">查看趋势</text>
        </view>
        <view class="menu-item" @click="navigateTo('/pages/common/health/viewExerciseStep')">
          <image class="menu-icon" src="/static/icons/exercise.png"></image>
          <text class="menu-text">运动记录</text>
          <text class="menu-desc">步数统计</text>
        </view>
      </view>
    </view>

    <!-- 提醒设置 -->
    <view class="menu-section">
      <view class="menu-title">提醒设置</view>
      <view class="menu-list">
        <view class="menu-item" @click="navigateTo('/pages/common/alert')">
          <view class="menu-item-left">
            <image class="menu-icon" src="/static/icons/medicine.png"></image>
            <view class="menu-info">
              <text class="menu-text">用药提醒</text>
              <text class="menu-desc">设置服药时间</text>
            </view>
          </view>
          <view class="menu-right">
            <text class="menu-status" v-if="currentElderly.medicineReminder">已开启</text>
            <text class="arrow">></text>
          </view>
        </view>
        <view class="menu-item" @click="navigateTo('/pages/common/alert')">
          <view class="menu-item-left">
            <image class="menu-icon" src="/static/icons/checkup.png"></image>
            <view class="menu-info">
              <text class="menu-text">体检提醒</text>
              <text class="menu-desc">设置体检时间</text>
            </view>
          </view>
          <view class="menu-right">
            <text class="menu-status" v-if="currentElderly.checkupReminder">已开启</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 设备管理 -->
    <view class="menu-section">
      <view class="menu-title">设备管理</view>
      <view class="device-list">
        <view class="device-item" v-for="device in devices" :key="device.id">
          <view class="device-info">
            <image class="device-icon" :src="device.icon"></image>
            <view class="device-detail">
              <text class="device-name">{{device.name}}</text>
              <text class="device-status" :class="device.status">{{device.statusText}}</text>
            </view>
          </view>
          <view class="device-actions">
            <button class="device-btn" @click="handleDeviceAction(device)">{{device.actionText}}</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 解绑按钮 -->
    <view class="unbind-section" v-if="currentElderly">
      <button class="unbind-btn" @click="showUnbindConfirm">解绑老人</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useBindingStore } from '@/store/modules/useBindingStore';
import { useUserStore } from '@/store/modules/useUserStore';

const bindingStore = useBindingStore();
const userStore = useUserStore();

const currentElderly = ref(null);
const devices = ref([
  {
    id: 1,
    name: '智能手环',
    icon: '/static/icons/band.png',
    status: 'connected',
    statusText: '已连接',
    actionText: '断开'
  },
  {
    id: 2,
    name: '血压计',
    icon: '/static/icons/bp-monitor.png',
    status: 'disconnected',
    statusText: '未连接',
    actionText: '连接'
  }
]);

onMounted(async () => {
  const bindingId = bindingStore.getCurBindingId;
  if (bindingId) {
    // 获取当前绑定老人的详细信息
    // 这里需要调用API获取老人详细信息
    currentElderly.value = {
      name: '张三',
      age: 75,
      sex: 'male',
      bloodPressure: '120/80',
      heartRate: '75',
      bloodOxygen: '98%',
      medicineReminder: true,
      checkupReminder: false
    };
  }
});

const navigateTo = (url) => {
  uni.navigateTo({ url });
};

const handleDeviceAction = (device) => {
  // 处理设备连接/断开操作
  uni.showToast({
    title: device.status === 'connected' ? '正在断开设备...' : '正在连接设备...',
    icon: 'none'
  });
};

const showUnbindConfirm = () => {
  uni.showModal({
    title: '解绑确认',
    content: '确定要解绑该老人吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await bindingStore.deleteBinding(currentElderly.value.id);
          uni.showToast({
            title: '解绑成功',
            icon: 'success'
          });
          uni.navigateBack();
        } catch (error) {
          uni.showToast({
            title: '解绑失败',
            icon: 'none'
          });
        }
      }
    }
  });
};

const getBloodPressureClass = (value) => {
  if (!value) return '';
  const [systolic, diastolic] = value.split('/').map(Number);
  if (systolic > 140 || diastolic > 90) return 'warning';
  if (systolic < 90 || diastolic < 60) return 'warning';
  return 'normal';
};

const getHeartRateClass = (value) => {
  if (!value) return '';
  const rate = Number(value);
  if (rate > 100 || rate < 60) return 'warning';
  return 'normal';
};

const getBloodOxygenClass = (value) => {
  if (!value) return '';
  const oxygen = Number(value);
  if (oxygen < 95) return 'warning';
  return 'normal';
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 20rpx;
}

.info-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      margin-right: 20rpx;
    }

    .info-content {
      .name {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        display: block;
      }

      .age, .gender {
        font-size: 28rpx;
        color: #666;
        margin-right: 20rpx;
      }
    }
  }

  .health-overview {
    display: flex;
    justify-content: space-between;
    padding-top: 20rpx;
    border-top: 1rpx solid #eee;

    .health-item {
      text-align: center;

      .label {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 10rpx;
        display: block;
      }

      .value {
        font-size: 32rpx;
        font-weight: bold;

        &.normal {
          color: #4caf50;
        }

        &.warning {
          color: #f44336;
        }
      }
    }
  }
}

.menu-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;

  .menu-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }

  .menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .menu-item {
      background-color: #f8f9fa;
      border-radius: 15rpx;
      padding: 20rpx;
      text-align: center;

      .menu-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }

      .menu-text {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
      }

      .menu-desc {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .menu-list {
    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .menu-item-left {
        display: flex;
        align-items: center;

        .menu-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }

        .menu-info {
          .menu-text {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
            display: block;
          }

          .menu-desc {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      .menu-right {
        display: flex;
        align-items: center;

        .menu-status {
          font-size: 24rpx;
          color: #4caf50;
          margin-right: 10rpx;
        }

        .arrow {
          color: #999;
          font-size: 28rpx;
        }
      }
    }
  }
}

.device-list {
  .device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .device-info {
      display: flex;
      align-items: center;

      .device-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 20rpx;
      }

      .device-detail {
        .device-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
        }

        .device-status {
          font-size: 24rpx;

          &.connected {
            color: #4caf50;
          }

          &.disconnected {
            color: #999;
          }
        }
      }
    }

    .device-actions {
      .device-btn {
        font-size: 24rpx;
        padding: 8rpx 20rpx;
        border-radius: 30rpx;
        background-color: #f5f5f5;
        color: #666;
      }
    }
  }
}

.unbind-section {
  padding: 40rpx 0;

  .unbind-btn {
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    color: #f44336;
    border: 1rpx solid #f44336;
    border-radius: 10rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>